<template>
  <div id="app">
    <router-view />
    <div id="nav">
      <router-link :to="item.path" v-for="(item,index) in navList" :key="index">
        <div :class="['footer01', flag == index ? 'active' : '']" @click="flag = index">
          <span :class="['iconfont',item.icon]"></span>
          <p>{{item.name}}</p >
        </div>
      </router-link>
    
    
    </div>
  
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: 0,
      navList:[
        {
          path:"/",
          icon:'icon-jiankang',
          name:'健康'
        },
        {
          path:"/yundone",
          icon:'icon-paobu',
          name:'运动'
        },
        {
          path:"/faxianone",
          icon:'icon-wangluo',
          name:'发现'
        },
        {
          path:"/shebeione",
          icon:'icon-peishi-shoubiao',
          name:'设备'
        },
        {
          path:"/Aboutmeone",
          icon:'icon-wode',
          name:'我的'
        },
       
      ]
    };
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  list-style: none;
}
html {
  font-size: 26.67vw;
  background: #f2f4f3;
}
#nav {
  width: 100%;
  height: 0.6rem;
  background-color: #fff;
  font-size: 0.16rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
}
.footer01 {
  width: 100%;
  height: 0.5rem;
  font-size: 0.16rem;
  color: #9d9d9d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#nav .footer01 .iconfont {
  color: #9d9d9d;
  font-size: 0.2rem;
}
a {
  text-decoration: none;
}
.active {
  color:#c1c0c5 ;
  background: #ed703a;
}
 
</style>